import React, { Component } from 'react';
import { Tabs, NavBar, Icon, Toast } from 'antd-mobile';
import axios from '../../utils/fecth'
import style from './GoodList.module.scss'
import img from '../../utils/img'
import SearchInput from '../index/searchinput/SearchInput'
class GoodList extends Component {
    state = {
        goodListDate: [],
        obj:{a:1}
    }
    goodListRef = React.createRef();//获取ref
    pageSize = 20;//单次请求获取的数据量

    componentDidMount() {
        console.log(this.props.history.location.search)
        this.pargram = this.props.history.location.search
        this.pargram_a = this.pargram.split("?")[1] || "[]"
        this.pargram_arr = this.pargram_a.split("=")
        console.log(this.pargram_arr[1])
        this.getProductList()//数据请求时不可滚动监听暂时不会执行

        this.goodListRef.current.addEventListener(
            "scroll",
            () => { this.handerGrounding() }

        );

    }
    //监听数据触底
    handerGrounding() {

        let div = this.goodListRef.current
        // console.log(div)
        // console.log(div.clientHeight, "窗口高度")
        // console.log(div.scrollTop, "滚动距离")
        // console.log(div.scrollHeight, "可滚动距离")
        // console.log(div.scrollHeight - div.scrollTop - div.clientHeight)
        if (div.scrollHeight - div.scrollTop - div.clientHeight <= 0) {
            this.getProductListGrounding()
        }


    }
    //触底请求数据
    getProductListGrounding() {
        console.log(this.total)
        if (this.pagenum <= this.total / this.pageSize) {
            this.pagenum++
            this.getProductList()
        } else {
            Toast.info("已经是最后一条数据啦", 1);
        }

    }
    // getProductListData(){
    //     console.log(this)
    //     let pargrams = {}

    //     if (this.pargram_arr[0] === "query") {
    //         pargrams.query = decodeURIComponent(this.pargram_arr[1])

    //     }
    //     if (this.pargram_arr[0] === "cid") {
    //         pargrams.cid = decodeURIComponent(this.pargram_arr[1])

    //     }
    //     pargrams.pagenum=this.pagenum;



    //     console.log(pargrams)
    //     axios.get("/goods/search", {

    //         params: pargrams,

    //     }).then(res => {
    //         console.log(res)
    //         this.setState({

    //             goodListDate: [...this.state.goodListDate, ...res.goods]

    //         })

    //     })
    // }

    //获取列表数据
    getProductList() {
        console.log(this)
        let pargrams = {}

        if (this.pargram_arr[0] === "query") {
            pargrams.query = decodeURIComponent(this.pargram_arr[1])

        }
        if (this.pargram_arr[0] === "cid") {
            pargrams.cid = decodeURIComponent(this.pargram_arr[1])

        }
        if (this.total) {//total为空则不加入pagenum
            pargrams.pagenum = this.pagenum;
        }
        console.log(pargrams)
        axios.get("/goods/search", {

            params: pargrams,

        }).then(res => {
            console.log(res)
            this.total = res.total
            this.pagenum = res.pagenum
            if (!this.total) {
                this.setState({
                    goodListDate: res.goods

                })
            } else {
                this.setState({
                    goodListDate: [...this.state.goodListDate, ...res.goods]
                })

            }

        })
    }
   

    //跳转至商品详情页
    jumpToGoodDetail(pargrams) {
        console.log(this)
        this.props.history.push("/goodDetail/" + pargrams);
    }
    render() {
        const tabs = [
            { title: "综合" },
            { title: "销量" },
            { title: "价格" },
        ];

        return (

            <div className={style.goodListContent}  >
                <div className={style.goodListNav} >
                    <NavBar
                        className={style.goodListNav_}

                        icon={<Icon type="left" />}
                        onLeftClick={() => window.history.go(-1)}
                    >
                        <div className={style.goodListNavTitle}>商品列表</div>
                    </NavBar>
                    <div className={style.goodListContentSearch}>
                        <SearchInput></SearchInput>
                    </div>
                </div>
                <div className={style.goodListContentItem} >
                    <Tabs tabs={tabs}
                        initialPage={0}
                        onChange={(tab, index) => { console.log('onChange', index, tab); }}
                        onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }}
                        tabBarUnderlineStyle={{ borderColor: "red" }}

                    >
                        <div className={style.goodListContentItemBox} ref={this.goodListRef}>
                          
                            {this.state.goodListDate.map(v => {
                                return (
                                    <div className={style.goodListItem} key={v.goods_id} onClick={this.jumpToGoodDetail.bind(this, v.goods_id)}>
                                        <div className={style.goodListItemImg}>
                                            <img src={v.goods_small_logo ? v.goods_small_logo : img.empty} alt="" />
                                        </div>
                                        <div className={style.goodListItemTitle}>
                                            <div className={style.goodListItemTitleTop}>
                                                {v.goods_name}
                                            </div>
                                            <div className={style.ygGoodDetailBottomTitleBottom}>
                                                ￥{
                                                    v.goods_price
                                                }
                                            </div>
                                        </div>
                                    </div>

                                )
                            })}
                        </div>
                        <div style={
                            {
                                display: 'flex',
                                alignItems: 'center',
                                justifyContent: 'center',
                                height: '150px',
                                backgroundColor: '#fff'
                            }
                        }>
                            Content of second tab
                    </div>
                        <div style={
                            {
                                display: 'flex',
                                alignItems: 'center',
                                justifyContent: 'center',
                                height: '150px',
                                backgroundColor: '#fff'
                            }
                        }>
                            Content of third tab
                    </div>
                    </Tabs>
                </div>
            </div>
        );
    }
}

export default GoodList;
